﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wiky JavaScript Labrary</title>
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/wikyjs.js" ></script>
<style type="text/css">
#block1{ width:100px; height:100px;background:#9F0;}
#block2{ width:96px; height:20px;background:#F60;display:block;}
#block3{ width:96px;padding:2px; height:96px;background:#CCC;}
</style>
</head>

<body>
<div id="wapper">
<!--header start-->
<div id="header">
	<div class="head_top">
    	<div class="fleft">
            <a class="top_home" title="首页" href="http://wiky.000a.biz/doc/index.html">WikyJS Home</a>
            <a class="top_blog" title="博客" href="http://wiky.cnblogs.com/">My Blog</a>
            

      </div>
        <div class="fright">
        	<a class="top_about" title="关于作者" href="http://www.cnblogs.com/wiky/articles/about.html">About Me</a>
        </div>
    </div>
    <div class="head_title">
    	<a class="head_logo" title="前端档案" href="http://wiky.cnblogs.com/">前端档案</a>
        <h1>WikyJS</h1>
        <h2>一个轻量级JavaScript库~</h2>
    </div>
    <div class="head_pos">
            <p class="curr-pos"><span>WikyJS例子：</span>Animation-使用fadeIn()</p>
    </div>
</div>
<!--header end-->
<!--container start-->
<div id="container">
	<div class="sideleft">
        <dl class="info">
          <dt><strong>WikyJS</strong><em>&nbsp;1.1.2</em></dt>
          <dd><span>WikyJS是一个轻量级的JavaScript辅助库，具有良好的便利性和可扩展性！</span></dd>
          <dd><div class="download"><a href="download/WikyJS.rar">下载最新版本</a></div></dd>
        </dl>
        <ul class="menu">
          <li>
            <h3><a title="基本" href="javascript:void(0)">Base</a></h3>
            <ul class="menu_list">
              <li><a title="$()" href="selector.html">$()</a></li>
              <li><a title="$().ready()" href="ready.html">$().ready()</a></li>
              <li><a title="$().html()" href="html.html">$().html()</a></li>
              <li><a title="$.extend()" href="extend.html">$.extend()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="文档对象模型" href="javascript:void(0)">DOM</a></h3>
            <ul class="menu_list">
              <li><a title="$().pageXY()" href="pageXY.html">$().pageXY()</a></li>
              <li><a title="$().style()" href="style.html">$().style()</a></li>
              <li><a title="$().hasClass()" href="hasClass.html">$().hasClass()</a></li>
              <li><a title="$().addClass()" href="addClass.html">$().addClass()</a></li>
              <li><a title="$().removeClass()" href="removeClass.html">$().removeClass()</a></li>
              <li><a title="$().setOpacity()" href="setOpacity.html">$().setOpacity()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="事件" href="javascript:void(0)">Event</a></h3>
            <ul class="menu_list">
              <li><a title="$().bind()" href="bind.html">$().bind()</a></li>
              <li><a title="$().getMousePos()" href="getMousePos.html">getMousePos()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="拖放" href="javascript:void(0)">Drag&amp;Drog</a></h3>
            <ul class="menu_list">
              <li><a title="$().drag()" href="drag.html">$().drag()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="动画" href="javascript:void(0)">Animation</a></h3>
            <ul class="menu_list">
              <li><a class="curr" title="$().fadeIn()" href="javascript:void(0)">$().fadeIn()</a></li>
              <li><a title="$().fadeOut()" href="fadeOut.html">$().fadeOut()</a></li>
              <li><a title="$().slide()" href="slide.html">$().slide()</a></li>
              <li><a title="$().slideUp()" href="slideUp.html">$().slideUp()</a></li>
              <li><a title="$().slideDown()" href="slideDown.html">$().slideDown()</a></li>
            </ul> 
          </li>
          <li>
            <h3><a title="Ajax" href="javascript:void(0)">Ajax</a></h3>
            <ul class="menu_list">
            	<li><a title="$().create()" href="create.html">$().create()</a></li>
            	<li><a title="$().ajax()" href="ajax.html">$().ajax()</a></li>
            </ul>
          </li>
          <li>
            <h3><a title="Cookie" href="javascript:void(0)">Cookie</a></h3>
            <ul class="menu_list">
              <li><a title="$().setCookie()" href="setCookie.html">$().setCookie()</a></li>
              <li><a title="$().getCookie()" href="getCookie.html">$().getCookie()</a></li>
              <li><a title="$().delCookie()" href="delCookie.html">$().delCookie()</a></li>
            </ul> 
          </li>
        </ul>
    </div>
	<div class="maincenter">
    	<div class="main_demo">
        	<div class="demo_title">
            	<h2>$().<span class="curr-pos">fadeIn()</span></h2>
              <p>作用：使当前的元素淡入。</p>
  <p>参数：无。</p>
                <p>返回值：返回一个指向当前元素的对象。</p>
            </div>
            <div class="demo_show">
            	<p>示例：<br />
                	使当前的元素淡入。
			  </p>
             <div id="block1">1</div>
              <button id="run1">淡入</button>
            </div>
        </div>
        <div class="main_title"><h4 class="fleft">示例说明</h4></div>        
     <p>Html代码</p>
        <div class="main_code">&lt;div id=&quot;block1&quot;&gt;1&lt;/div&gt;<br />
  &lt;button id=&quot;run1&quot;&gt;淡入&lt;/button&gt;</div>
    <p>JS代码</p>
        <div class="main_code">&lt;script type=&quot;text/javascript&quot;&gt;<br />
$().ready(function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;run1&quot;).bind(&quot;click&quot;,function(){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;block1&quot;).fadeIn();//使block1淡入。<br />
&nbsp;&nbsp;&nbsp;&nbsp;});<br />
});<br />
&lt;/script&gt; </div>
    </div>
</div>
<!--container end-->
<!--footer start-->
<div id="footer">
     <p class="copyright_en">Copyright &copy; 2010 Mankai Wiky. <a target="_blank" href="http://wiky.cnblogs.com/">Front-End File All Rights Reserved.</a></p>
     <p class="copyright_cn">维奇-前端档案 <a target="_blank" href="http://wiky.cnblogs.com/">版权所有</a></p>
</div>
<!--footer end-->
</div>
</body>
<script type="text/javascript">
$().ready(function(){
	$("run1").bind("click",function(){
		$("block1").fadeIn();
	});
});
</script>
</html>
